// 先加载路径文件，再加载header、footer
require(['./config'], () => {
    require(['request', 'template', 'header', 'footer', 'jquery', 'jqueryMin', 'jqueryZoom'], (req, template) => {
        class detail {
            constructor() {
                const count = 0
                this.getDetail()
            }

            // 获取数据渲染页面
            getDetail() {
                // console.log(window.location)
                // 从浏览器地址栏获取id
                const { search } = window.location
                const id = search.split('=')[1]
                // 通过id发送请求获取数据
                req.detail_getData(id)
                    .then(res => {
                        console.log(res)
                        const { title, image, photo, price, descContentList, id } = res.data.detail
                        const detailData = { title, photo, price, descContentList, id }
                        console.log(detailData)

                        // 获取详情页数据成功后，渲染详情页
                        $('.detail').html(template('detailTemplate', { title, image, photo, price, descContentList, id }))
                        // 改变数量
                        this.changeCount()
                        // 添加至购物车
                        this.addCart(title, image, price, id)
                        // 放大镜
                        this.zoom()
                    })
            }

            // 改变数量
            changeCount() {
                $('.reduce').click(function () {
                    this.count = $('.inputCount').val() - 0
                    this.count--
                    if (this.count < 1) {
                        this.count = 1
                        alert('真的不能再少了，多少买一点吧，又不贵')
                    }
                    $('.inputCount').val(this.count)
                    console.log(this.count);
                })
                $('.add').click(function () {
                    this.count = $('.inputCount').val() - 0
                    this.count++
                    $('.inputCount').val(this.count)
                    console.log(this.count);
                })
            }

            // 添加至购物车
            addCart(title, image, price, id) {
                $('.addcart').click(function () {
                    // 获取输入的购买数量
                    this.count = $('.inputCount').val() - 0

                    let list = JSON.parse(localStorage.getItem('list'))
                    // console.log(list)
                    if (list) {
                        // 有 list 这条数据
                        // list 是一个数组  里面有多条数据   所以我应该那每一条数据 的  id 和我当前的这个商品进行比较
                        const hasData = list.some(item => {
                            return item.id === id
                        })
                        console.log(hasData)
                        if (hasData) {
                            // 如果 list 里面有这条数据了 就让他的 数量 +1
                            list.forEach(item => {
                                if (item.id === id) {
                                    item.count = item.count - 0 + (this.count - 0)
                                }
                            })
                        } else {
                            // 如果 list 里面没有这条数据  就把这条数据加到 list 里面
                            list.push({ title, image, price, id, count: this.count })
                        }

                        // 最后都要在存储一次
                        localStorage.setItem('list', JSON.stringify(list))
                    } else {
                        // 没有这条数据 直接存 
                        localStorage.setItem('list', JSON.stringify([{ title, image, price, id, count: this.count }]))
                    }

                    // 加入成功提示框出现
                    $('.addSuccess').fadeIn(800, () => {
                        $('.addSuccess').fadeOut(800)
                    })
                })
            }

            // 放大镜
            zoom() {
                $(function () {
                    console.log($(".zoom"));
                    $(".zoom").imagezoomsl({
                        zoomrange: [1, 12]
                    });
                });
            }
        }
        return new detail()
    })
})